<template>
	<view class="topbar flex-between" :style="style">
		<view class="left">
			<template v-if="showBack">
				<view class="" v-if="!goHome">
					<m-icon @click="handleBack" v-if="goBack" size="38" :color="color" type="icon-fanhui"></m-icon>
				</view>
				<view class="goHome flex" v-else>
					<m-icon @click="handleBack" size="38" color="#a1a1a1" type="icon-fanhui"></m-icon>
					<text>|</text>
					<m-icon @click="Home" size="38" color="#999" type="icon-dianpu1"></m-icon>
				</view>
			</template>
			<slot name="back"></slot>
		</view>
		<view class="title" :style="{'color':color}">
			<slot name="title">{{title}}</slot>
		</view>
		<view class="right">
			<slot name="right"></slot>
		</view>
	</view>
</template>

<script>
	export default {
		name: "topbar",
		props: {
			title: String,
			goBack: {
				type: Boolean,
				default: true,
			},
			shouldBack: {
				type: Boolean,
				default: true,
			},
			color: {
				type: String,
				default: '',
			},
			goHome: {
				type: Boolean,
				default: false,
			},
			showBack: {
				type: Boolean,
				default: true,
			}
		},
		computed: {
			style() {
				return {
					color: this.color
				}
			}
		},
		data() {
			return {

			};
		},
		methods: {
			Home() {
				this.Jump({
					url: '/pages/home/home',
					mode: 4
				})
			},
			handleBack() {
				this.$emit('back')
				if (this.goBack && this.shouldBack) {
					this.Jump()
				}
			}
		}
	}
</script>

<style lang="scss">
	.topbar {
		padding: 28rpx 24rpx;
		position: relative;
		color: var(--text);
		height: 44px;
		box-sizing: border-box;

		.back {
			width: 36rpx;
			height: 32rpx;
			vertical-align: top;
		}

		.left {
			.goHome {
				display: inline-flex;
				position: relative;
				border: 1rpx solid var(--border);
				border-radius: 40rpx;
				padding: 10rpx 20rpx 10rpx 15rpx;

				text {
					padding: 0 15rpx;
					color: #EEEEEE;
				}
			}
		}

		.left,
		.right {
			line-height: 32rpx;
		}

		.right {
			display: flex;
			justify-content: flex-end;

			::v-deep text {
				font-size: 30rpx;
			}
		}

		.title {
			font-weight: bold;
			position: absolute;
			left: 50%;
			top: 50%;
			font-size: 32rpx;
			transform: translate(-50%, -50%);
		}
	}
</style>